<template>
  <div class="content nativeContent">
    <e-heading>{{setTitle}}</e-heading>
    <!--创建俱乐部-->
    <div v-if="clubList.length === 0">
      <el-form ref="form" :model="form" v-bind="getFormProps()">
        <el-form-item label="俱乐部名称："
          prop="groupName"
          :rules="[
            { required: true, message: '请输入俱乐部名称'},
            { min: 4, max: 20, message: '俱乐部名称长度在4-20个字符', trigger: 'blur'}
          ]">
          <el-input v-model="form.groupName" placeholder="请输入俱乐部名称" v-focus @blur="handleClubName" :maxlength="20" number-word />
        </el-form-item>
        <el-form-item label="俱乐部头像："
          prop="iconUrl"
          :rules="[
            {required: true, message: '请上传俱乐部头像'}
          ]">
          <e-img-upload v-model="form.iconUrl" :size="1024 * 1024 * 3" class="logo-upload"/>
          <span class="form-help">
            请上传一张图片作为俱乐部头像。大小不能超过3M
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')" :loading="loading">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--选择俱乐部-->
    <div class="select-club" v-else>
      <el-radio-group v-model="clubSelect" class="club_radio">
        <el-row>
          <el-col :span="8" v-for="(item, index) in clubList" :key="index" class="club_lsitcint">
            <el-radio :label="item.orgUserId">
              <e-img-match :src="item.iconUrl" class="club_pic"/>
              <span class="group_name" :title="item.groupName">{{item.groupName}}</span>
            </el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
      <el-row>
        <el-col :span="24">
          <el-button @click="haddleAddClub">+ 创建俱乐部</el-button>
        </el-col>
      </el-row>
      <div class="sub-btn">
          <el-button type="primary" @click="handleSubmit" :loading="loading" :disabled="!clubSelect">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import EImgUpload from '@e-ui/ImgUpload'
import api from 'api/race'
export default {
  mixins: [form],
  components: {
    EImgUpload
  },
  computed: {
    setTitle: function () {
      return this.clubList.length ? '选择俱乐部' : '创建俱乐部'
    }
  },
  data () {
    return {
      loading: false,
      clubSelect: '',
      clubList: [],
      form: {
        groupName: '',
        iconUrl: ''
      },
      matchListData: ''
    }
  },
  mounted () {
    this.clubList = this.$route.query.clubList
    this.matchListData = this.$route.query.matchData.matchParticipantReq
  },
  methods: {
    handleClubName (value) { // 校验俱乐部是否重名
      api.checkClubname({nickname: value}).then(res => {
        // console.log(res)
      }).catch(() => {
        return false
      })
    },
    submitForm (form) { // 无俱乐部提交
      this.$refs[form].validate((valid) => {
        if (valid) {
          let saveMatchListData = Object.assign({groupCreateReqVO: this.form}, this.matchListData)
          let saveMatchData = this.$route.query.matchData
          delete saveMatchData.matchParticipantReq
          let matchDatas = Object.assign({matchParticipantReq: saveMatchListData}, saveMatchData)
          api.saveMultiMember(matchDatas, {context: this, successMsg: '添加成功'}).then(res => {
            this.$router.push({path: '/race/detail/player', query: {id: this.$route.query.id, matchId: this.$route.query.id, matchtype: this.$route.query.matchtype, cost: this.$route.query.cost, tasktype: this.$route.query.tasktype, isRun: this.$route.query.isRun}})
          })
        } else {
          return false
        }
      })
    },
    haddleAddClub () {
      this.clubList = []
    },
    handleSubmit () { // 有俱乐部提交
      let orgUserId = {orgUserId: this.clubSelect}
      let saveMatchListData = Object.assign({groupCreateReqVO: orgUserId}, this.matchListData)
      let saveMatchData = this.$route.query.matchData
      delete saveMatchData.matchParticipantReq
      let matchDatas = Object.assign({matchParticipantReq: saveMatchListData}, saveMatchData)
      api.saveMultiMember(matchDatas, {context: this, successMsg: '添加成功'}).then(res => {
        this.$router.push({path: '/race/detail/player', query: {id: this.$route.query.id, matchId: this.$route.query.id, matchtype: this.$route.query.matchtype, cost: this.$route.query.cost, tasktype: this.$route.query.tasktype, isRun: this.$route.query.isRun}})
      })
    }
  }
}
</script>

<style lang="scss" scope>
.nativeContent {
  .el-form {
    width: 642px;
    .img-upload {
      width: 180px;
      height: 180px;
    }
  }
  .select-club{
    padding-top:30px;
    .club_radio{
      width:100%;
      .club_lsitcint{
        margin-bottom: 35px;
      }
    }
    .club_pic{
      width:50px;
      height:50px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .group_name {
      width: 190px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .sub-btn{
      margin:80px 0;
    }
  }
}
</style>
